<template>
  <!--侧滑组件 slideHTML页面  默认scroll-x scroll-y 手动添加 -->
  <view v-if="slideData .type == 'slide'"
   :class="slideData .data.class"
   :id="slideData .data.id"
    :data-components="slideData .data.components"
   :style="[isFixedTop && slideData .data.id == 'fixedTop' ? styleObject : slideData .data.style]"
   >
    <!-- 第一层循环 -->
    <block v-for="(firstbannerItem, firstbannerIndex) in slideData.data.child" :key="firstbannerIndex">
      <scroll-view v-if="firstbannerItem.tagType == 'scroll-view'" scroll-x="true" :class="firstbannerItem.class"
        :style="firstbannerItem.style">
        <!-- 第二层循环 -->
        <block v-for="(secondsliderChildItem, secondsliderChildIndex) in firstbannerItem.child" :key="secondsliderChildIndex">
          <view v-if="secondsliderChildItem.tagType == 'div'"
            @click="cmsClickHandle"
            :data-handle="secondsliderChildItem.onclick"
            :data-text="secondsliderChildItem.text"
            :data-title="secondsliderChildItem.title"
            :data-couponRuleId="secondsliderChildItem.couponruleid"
            :class="[filterChecked.sustainableStyle(secondsliderChildItem.class,showDesign,showSustaia,showSustaib,showSustaic,showSustaid,showSustaie,showSustaif,showSustaig,showSustaih,showSustaii,showSustaij,showSustaik,showSustail,showSustaim,showGrid,showList,windowShadesa, windowShadesb,windowShadesc)]"
            :style="secondsliderChildItem.style">
            <block v-if="secondsliderChildItem.text">{{secondsliderChildItem.text}}</block>
            <!-- 第三层循环 tagType == 'div'-->
            <block v-for="(thirdsliderChildItems,thirdsliderChildIndexs) in secondsliderChildItem.child" :key="thirdsliderChildIndexs">
             <image v-if="thirdsliderChildItems.tagType == 'img'" :mode="thirdsliderChildItems.mode ? thirdsliderChildItems.mode : modeStyle "
               :src="thirdsliderChildItems.src" style="height: auto;" :style="thirdsliderChildItems.style" :class="thirdsliderChildItems.class"></image>

              <navigator @click="navigatorClickHandle" :data-index="indexOne"  v-if="thirdsliderChildItems.tagType == 'a'" :style="thirdsliderChildItems.style" :url="thirdsliderChildItems.href"
                :target="thirdsliderChildItems.target" :class="thirdsliderChildItems.class" hover-class="none">
                <block v-if="thirdsliderChildItems.text">{{thirdsliderChildItems.text}}</block>

                <!-- 第四层循环 tagType == 'a'-->
                <block v-for="(fourthsliderChildItems,fourthsliderChildIndexs) in thirdsliderChildItems.child"
                  :key="fourthsliderChildIndexs">
                  <image v-if="fourthsliderChildItems.tagType == 'img'" :mode="fourthsliderChildItems.mode ? fourthsliderChildItems.mode : modeStyle "
                    :src="fourthsliderChildItems.src" style="height: auto;" :style="fourthsliderChildItems.style" :class="fourthsliderChildItems.class"></image>
                </block>

              </navigator>

              <view v-if="thirdsliderChildItems.tagType == 'div'"
                :style="thirdsliderChildItems.style"
                :data-handle="thirdsliderChildItems.onclick"
                :data-text="thirdsliderChildItems.text"
                :data-title="thirdsliderChildItems.title"
                :class="[filterChecked.sustainableStyle(thirdsliderChildItems.class,showDesign,showSustaia,showSustaib,showSustaic,showSustaid,showSustaie,showSustaif,showSustaig,showSustaih,showSustaii,showSustaij,showSustaik,showSustail,showSustaim,showGrid,showList,windowShadesa, windowShadesb,windowShadesc)]"
              >
                <block  v-if="thirdsliderChildItems.text">{{thirdsliderChildItems.text}}</block>
                <!-- 第四层循环 tagType == 'div'-->
                <block v-for="(fourthsliderChildItems,fourthsliderChildIndex) in thirdsliderChildItems.child"
                  :key="fourthsliderChildIndex">
                  <h2 v-if="fourthsliderChildItems.tagType == 'h2'"  @click.stop="cmsClickHandle" :data-handle="fourthsliderChildItems.onclick"
				  :data-link="fourthsliderChildItems.link"
					:data-ep="fourthsliderChildItems.ep" :data-en="fourthsliderChildItems.en" :style="fourthsliderChildItems.style"
                    :class="fourthsliderChildItems.class">{{fourthsliderChildItems.text}}</h2>
                  <p v-if="fourthsliderChildItems.tagType == 'p'" :style="fourthsliderChildItems.style" :class="fourthsliderChildItems.class">{{fourthsliderChildItems.text}}</p>
                  <navigator @click="navigatorClickHandle" :data-index="indexOne"  v-if="fourthsliderChildItems.tagType == 'a'" :url="fourthsliderChildItems.href"
                    :style="fourthsliderChildItems.style" :class="fourthsliderChildItems.class" hover-class="none">
                    <block v-if="fourthsliderChildItems.text"> {{fourthsliderChildItems.text}}</block>
                    <!-- 第五层循环 tagType == 'a'-->
                    <block v-for="(fifthsliderChildItems,fifthsliderChildIndexs) in fourthsliderChildItems.child"
                      :key="fifthsliderChildIndexs">
                      <image v-if="fifthsliderChildItems.tagType == 'img'" :mode="fifthsliderChildItems.mode ? fifthsliderChildItems.mode : modeStyle "
                        :src="fifthsliderChildItems.src" style="height: auto;" :style="fifthsliderChildItems.style" :class="fifthsliderChildItems.class"></image>
                    </block>

                  </navigator>
                  <view v-if="fourthsliderChildItems.tagType == 'div'" :class="fourthsliderChildItems.class"
                    :style="fourthsliderChildItems.style">
                    <block v-if="fourthsliderChildItems.text">{{fourthsliderChildItems.text}}</block>
                    <!-- 第五层循环 -->
                    <block v-for="(fifthsliderChildItems,fifthsliderChildIndexs) in fourthsliderChildItems.child"
                      :key="fifthsliderChildIndexs">
                      <navigator @click="navigatorClickHandle" :data-index="indexOne"  v-if="fifthsliderChildItems.tagType == 'a'" :url="fifthsliderChildItems.href"
                        :target="fifthsliderChildItems.target" :class="fifthsliderChildItems.class" :style="fifthsliderChildItems.style"
                        hover-class="none">
                        <block v-if="fifthsliderChildItems.text">{{fifthsliderChildItems.text}}</block>
                           <!-- 第六层循环 tagType == 'a'-->
                           <block v-for="(sixthsliderChildItems,sixthsliderChildIndexs) in fifthsliderChildItems.child"
                             :key="sixthsliderChildIndexs">
                             <image v-if="sixthsliderChildItems.tagType == 'img'" :mode="sixthsliderChildItems.mode ? sixthsliderChildItems.mode : modeStyle"
                               :src="sixthsliderChildItems.src" style="height: auto;" :style="sixthsliderChildItems.style" :class="sixthsliderChildItems.class"></image>
                           </block>

                      </navigator>
                    </block>
                  </view>
                </block>
              </view>
            </block>
          </view>
        </block>
      </scroll-view>
    </block>
  </view>
</template>

<script module="filterChecked" lang="wxs" src="../../../utils/filter.wxs"></script>
<script>
  export default {
    props: {
      slideData: Object,
      isFixedTop: Boolean, //是否固定顶部
    },

    data(){
      return{
        modeStyle:'widthFix',
        navBarHeight: 0,
        // 吸顶效果
        navbarInitTop: 0, //导航栏初始化距顶部的距离
        styleObject: {
          top: '40px',
          position: 'fixed',
          'z-index': '100',
          width: '100%',
          background: '#fff',
        },

        showGrid:false,
        showDesign:true,  //默认显示弹层
        showList:false,
        showTshirt:false,

        // 百叶窗效果
        windowShadesa: false,
        windowShadesb: false,
        windowShadesc: false,

        // toggle效果 元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
        showSustaia:false,
        showSustaib:false,
        showSustaic:false,
        showSustaid:false,
        showSustaie:false,
        showSustaif:false,
        showSustaig:false,
        showSustaih:false,
        showSustaii:false,
        showSustaij:false,
        showSustaik:false,
        showSustail:false,
        showSustaim:false,

        jumpHandleNames:['jump_a','jump_b','jump_c','jump_d','jump_e','jump_f','jump_g','jump_h','jump_i', 'jump_j','jump_k'],
      }
    },

    created(){
      let that = this;
      this.navBarHeight = getApp().globalData.navBarHeight - 3;
      this.styleObject.top = this.navBarHeight  + 'px';
    },

    updated(){
      /**
       * 吸顶效果
       */
      let that = this;
      if (that.navbarInitTop == 0) {
        const query = uni.createSelectorQuery().in(this);
        query.select('#fixedTop').boundingClientRect()
        query.exec(function(rect) {
          if (rect[0] && rect[0].top > 0) {
            var navbarInitTop = parseInt(rect[0].top);
            that.navbarInitTop = navbarInitTop;
            that.$emit("slideInitTop", {
              initTop: that.navbarInitTop
            });
          }
        })
      }
    },


    methods:{
      navigatorClickHandle(e){
        let index = e.currentTarget.dataset.index;
        // this.$EFSTracking.trackingAction('CLICK_CMS',JSON.stringify({"handleName":this.CMSItem[0][index]["title"],"pageId": this.CMSItem[0][index]["pageId"],"index": index,"text":"none"}),{});
      },

      // cms组件点击事件
      cmsClickHandle(e){
        let that = this;
        let handleName = e.target.dataset.handle ||  e.currentTarget.dataset.handle;
		let link = e.target.dataset.link ||  e.currentTarget.dataset.link;
        if(!handleName){
          return
        }

        // 锚点链接
        if(this.jumpHandleNames.indexOf(handleName) !== -1){
        	const query = uni.createSelectorQuery().in(this);
        	  query.select('#'+ handleName).boundingClientRect()
        	  query.selectViewport().scrollOffset()
        	  query.exec(function(res) {
        	    uni.pageScrollTo({
        	      scrollTop: res[0].top + res[1].scrollTop -60,
        	      duration: 500
        	    });
        	  })
        } else {
			//探访麦卡伦
			if (handleName == 'visitmacallan') {
				//点击首页探访麦卡伦
				let en = e.target.dataset.en ? e.target.dataset.en : e.currentTarget.dataset.en;
				let ep = e.target.dataset.ep ? e.target.dataset.ep : e.currentTarget.dataset.ep;
				let params = ep.indexOf("'") !== -1 ? JSON.parse(ep.replace(/'/g, '"')) : JSON.parse(ep)
				getApp().commonClTrack(en, params);
				uni.navigateTo({
				  url: link
				})
			}

          // that.$emit('slideClickEvent', e)
        }
      },
    },

  }
</script>

<style lang="less">
  .showSustaia{
     display:block;
   }
   .showSustaib{
     display:block;
   }
   .showSustaic{
     display:block;
   }
   .showSustaid{
     display:block;
   }
   .showSustaie{
     display:block;
   }
   .showSustaif{
     display:block;
   }
   .showSustaig{
     display:block;
   }
   .showSustaih{
     display:block;
   }
   .showSustaii{
     display:block;
   }
   .showSustaij{
     display:block;
   }
   .showSustaik{
     display:block;
   }
   .showSustail{
     display:block;
   }
   .showSustaim{
     display:block;
   }
   .hideSustaia{
     display: none;
   }
   .hideSustaib{
     display: none;
   }
   .hideSustaic{
     display: none;
   }
   .hideSustaid{
     display: none;
   }
   .hideSustaie{
     display: none;
   }
   .hideSustaif{
     display: none;
   }
   .hideSustaig{
     display: none;
   }
   .hideSustaih{
     display: none;
   }
   .hideSustaii{
     display: none;
   }
   .hideSustaij{
     display: none;
   }
   .hideSustaik{
     display: none;
   }
   .hideSustail{
     display: none;
   }
   .hideSustaim{
     display: none;
   }
   .showPlusIcona{
     display: block;
     float: right;
   }
   .hidePlusIcona{
     display: none
   }
   .showPlusIconb{
     display: block;
     float: right;
   }
   .hidePlusIconb{
     display: none
   }

   .showPlusIconc{
     display: block;
     float: right;
   }
   .hidePlusIconc{
     display: none
   }

   .showPlusIcond{
     display: block;
     float: right;
   }
   .hidePlusIcond{
     display: none
   }

   .showPlusIcone{
     display: block;
     float: right;
   }
   .hidePlusIcone{
     display: none
   }

   .showPlusIconf{
     display: block;
     float: right;
   }
   .hidePlusIconf{
     display: none
   }

   .showPlusIcong{
     display: block;
     float: right;
   }
   .hidePlusIcong{
     display: none
   }
   .showPlusIconh{
     display: block;
     float: right;
   }
   .hidePlusIconh{
     display: none
   }
   .showPlusIconi{
     display: block;
     float: right;
   }
   .hidePlusIconi{
     display: none
   }
   // sustainability 页面效果 END

   // 百叶窗效果 begin
   .showWindowShadesa{ display: block;}
   .showWindowShadesb{ display: block;}
   .showWindowShadesc{ display: block;}
   .hideWindowShadesa{display: none;}
   .hideWindowShadesb{display: none;}
   .hideWindowShadesc{display: none;}
   // 百叶窗效果 end


</style>
